<style lang="scss" scoped>
  .sunny-card {
    background-color: #CE393D;
    padding: 0 1.5rem;
    overflow: hidden;
    button {
      padding: 0;
      &:focus {
        outline: 0;
      }
    }
    .caption {
      text-align: center;
      font-size: 1.6rem;
      color: #EECC8F;
      font-weight: bold;
      margin-bottom: 4rem;
    }
    .price-control {
      margin: 3rem 1.5rem;
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      input {
        border: 0;
        font-size: 1.4rem;
        padding: 1.4rem 1.2rem;
        width: 80%;
        text-align: center;
        &:focus {
          outline: 0;
        }
      }
      button {
        width: 20%;
        border: 0;
        border-left: 1px solid #C6C292;
        font-size: 1.6rem;
        color: #C6C292;
        background: none;
        white-space: nowrap;
      }
    }
    .divider {
      margin: 3rem 1.5rem;
      span {
        display: inline-block;
        vertical-align: middle;
      }
      .left-line {
        width: 35%;
        height: 2px;
        background-image: linear-gradient(to left, #D9836A, #CE393D);
      }
      .right-line {
        width: 35%;
        height: 2px;
        background-image: linear-gradient(to right, #D9836A, #CE393D);
      }
      .divider-pic {
        width: 30%;
        padding: 0 1rem;
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .price-btn {
      width: calc(100% - 3rem);
      font-size: 1.6rem;
      padding: 1rem;
      border: 0;
      background-color: #EECC8F;
      color: #513E3A;
      border-radius: 5px;
      margin: 0 1.5rem 2.5rem;
    }
    .price-intro-hd {
      background-repeat: no-repeat;
      font-size: 1.6rem;
      padding: 1rem;
      text-align: center;
      color: #F8B1AB;
      background-size: contain;
      background-position: center;
      margin: 2rem 1.5rem 2rem;
    }
    .price-intro-bd {
      margin-bottom: 2.5rem;
      border-radius: 5px;
      padding: 1rem;
      &.red-bg {
        background-color: #BE2F33;
        p {
          margin: 0;
          font-size: 1.4rem;
          line-height: 1.5;
        }
      }
      &.white-bg {
        background-color: #fff;
        .title {
          display: inline-block;
          vertical-align: middle;
          background-repeat: no-repeat;
          background-size: auto 80%;
          background-position: 0 center;
          font-size: 1.4rem;
          padding: 1rem 0 1rem 5rem;
        }
        .pic {
          margin: 1.5rem 0;
          display: block;
          width: 100%;
        }
      }
    }
  }
</style>
<template>
  <div class="sunny-card">
    <p class="caption">阳关卡充值</p>
    <button type="button" class="price-btn"
            @click="paySunnyCard('monthly', 8.6)">月卡: 8.6元
      (享圈子商品9.6折)
    </button>
    <button type="button" class="price-btn" @click="paySunnyCard('quarter', 22.5)">
      季卡: 22.5元 (享圈子商品9.6折)</button>
    <button type="button" class="price-btn" @click="paySunnyCard('semiannual', 39)">半年卡: 39元
      (享圈子商品9.6折)
    </button>
    <button type="button" class="price-btn" @click="paySunnyCard('annual', 60)">年卡: 60元
      (享圈子商品9.6折)
    </button>

    <div class="price-intro-hd" style="background-image:
    url('./static/img/intro-hd.png')">
      阳光卡介绍</div>
    <div class="price-intro-bd red-bg">
      <p>1、阳光卡其实就是《小树林APP》的打折会员卡。</p>
      <p>2、阳光卡仅限小树林圈子里的商品打折使用。</p>
      <p>3、阳光卡分为月卡、季卡、半年卡、一年卡。</p>
      <p>4、阳光卡价格：月卡：8.6元、季卡：22.5元、半年卡：39元、年卡：60元</p>
      <p>5、阳光卡用户可享受小树林圈子里所有商品0.96折优惠。</p>
      <p>6、阳光卡最终使用解释权归小树林APP所有。</p>
    </div>
  </div>
</template>
<script>
  import _ from 'lodash'
  // import webviewJavascriptBridge from '../assets/utils/webviewJavascriptBridge.js'
  import userAgent from '../assets/utils/userAgent.js'
  import Uid from '../assets/utils/uid.js'
  // import api from '../assets/utils/api.js'
  export default {
    name: 'SunnyCard',
    data () {
      return {
        uid: '1',
        osType: '',
        version: null,
        uidtoken: null
      }
    },
    watch: {
      price (val) {
        console.log(val)
      }
    },
    methods: {
      paySunnyCard (duration, price) {
        window.alert('功能正在内测阶段，测试完成将通知推出。')
        /* const vm = this
        window.vipbanlvPayCallback = (data) => {
          if (_.isString(data)) {
            data = _.attempt(JSON.parse.bind(null, data))
          }
          if (data.orderId) {
            if (this.uidtoken === 'undefined') {
              window.alert('老版本暂不支持点击跳转到支付宝，请支付完成后添加我们的小树林支付宝客服：18621174664领取现金。')
              return
            }
            window.alert('点击确定会打开您的支付宝，我们的小树林支付宝客服会把红包钱给你')
            window.location.href = 'http://mp.weixin.qq.com/s/!*4**zhifubaokefu01MmLE56xb*4**'
          }
        }

        const orderId = vm.getOrderId()
        if (this.osType === 'ios') {
          webviewJavascriptBridge.init(bridge => {
            // web -> ios
            bridge.callHandler('vipbanlvPayCall', {
              'orderId': orderId,
              'price': price,
              'title': '试用商品'
            }, response => {
              console.log('JS got response', response)
            })

            // ios -> web
            bridge.registerHandler('vipbanlvPayCallback', window.vipbanlvPayCallback)
          })
        } else if (this.osType === 'android') {
          if (_.isObject(window.vipbanlvFunc)) {
            window.vipbanlvFunc.vipbanlvPayCall(`{"orderId": ${orderId}, "price": ${price}, "title": "试用商品"}`)
          }
        } */
      },
      getOrderId () {
        const now = new Date()
        const year = now.getFullYear().toString()
        let month = _((now.getMonth() + 1).toString()).padStart(2, '0')
        let day = _(now.getDate().toString()).padStart(2, '0')
        let hours = _(now.getHours().toString()).padStart(2, '0')
        let minutes = _(now.getMinutes().toString()).padStart(2, '0')
        let seconds = _(now.getSeconds().toString()).padStart(2, '0')
        let milliseconds =
          _(now.getMilliseconds().toString()).padStart(4, '0')

        return year + month + day + hours + minutes + seconds + milliseconds
      }
    },
    created () {
      this.osType = userAgent.getOS()
      Uid.getUid().then(res => {
        this.uid = res.uid
        this.version = res.version
        this.uidtoken = res.uidtoken
      })
    }
  }
</script>
